<!--
 * @Author: Dorange.Wang
 * @Date: 2021-05-11 15:02:28
 * @LastEditors: your name
 * @LastEditTime: 2021-06-22 17:30:00
 * @Description: file content
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="800px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{ "导入结果" }}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <div class="pl30 pr30">
      <div class="import-result">
        <span class="import-result_size import-result_ok">
          <i class="el-icon-success"></i>
          成功 {{ result.oksize }}
        </span>
        <span class="import-result_size import-result_err">
          <i class="el-icon-error"></i>
          失败 {{ result.errsize }}
        </span>
      </div>
      <el-table
        ref="table"
        class="mt10"
        :data="tableData"
        style="width: 100%"
        current-row-key="id"
        stripe
        border
      >
        <el-table-column width="100" prop="rowNum" label="行号" />
        <el-table-column prop="errorMsg" label="错误原因" />
      </el-table>
      <div class="tr mt24">
        <x-pagination
          :total="result.errsize"
          :pageSize.sync="pageData.pageSize"
          :pageNo.sync="pageData.pageNo"
          @search="loadData"
        />
      </div>
    </div>

    <div slot="footer" class="tr">
      <el-button @click="showVisible = false">取 消</el-button>
      <el-button
        :disabled="result.oksize === 0"
        :loading="loading"
        type="primary"
        @click="submit"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      showVisible: false,
      result: {},
      callback: () => {},
      pageData: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      loading: false,
    };
  },

  methods: {
    open(result = {}, callback) {
      this.result = result;
      this.callback = callback;
      this.pageData = {
        pageSize: 10,
        pageNo: 1,
      };
      this.loadData();
      this.showVisible = true;
    },

    loadData() {
      const errs = this.result.errs || [];
      const { pageSize, pageNo } = this.pageData;
      const result = errs.slice((pageNo - 1) * pageSize, pageNo * pageSize);
      if (result.length === 0 && this.pageData.pageNo > 1) {
        this.pageData.pageNo = this.pageData.pageNo - 1;
        this.loadData();
        return;
      }
      this.tableData = result;
    },

    close() {
      this.loading = false;
      this.showVisible = false;
    },

    submit() {
      this.loading = true;
      this.callback();
    },
  },
};
</script>

<style lang="scss" scoped>
.import-result {
  &_ok {
    color: #67c23a;
  }
  &_err {
    color: #f56c6c;
    margin-left: 20px;
  }
}
</style>
